<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商城首页</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{../static/img/index/bitbug_favicon.ico}"/>
    <link rel="stylesheet" th:href="@{../static/css/bootstrap.css}"/>
    <link rel="stylesheet" th:href="@{../static/css/index/serch.css}"/>
    <link rel="stylesheet" th:href="@{../static/css/index/lunbo.css}"/>
    <script th:src="@{../static/js/jquery-2.1.0.js}" type="text/javascript" charset="utf-8"></script>
    <script th:src="@{../static/js/bootstrap.js}" type="text/javascript" charset="utf-8"></script>
    <style>
        .navbar-nav a {
            font-size: 16px;
        }

        .container {
            font-size: 16px;
        }

        .panel-body img {
            height: 120px;
            width: 250px;
        }
    </style>
    <script>
        $(function () {
            $('#getEwm').click(function () {
                $.ajax({
                    type: "get",
                    url: "/go/getEwm",
                    async: true,
                    success: function (res) {
                        console.log(res);
                        $('#ewm').attr('src', res.base64);
                        var timer = setInterval(function () {
                            $.ajax({
                                type: "get",
                                url: "/user/ewmLogin",
                                data: {
                                    "token": res.token
                                },
                                success: function (data) {
                                    if (data === "0") {
                                        window.clearInterval(timer);
                                        window.location.reload();
                                    }
                                }
                            })
                        }, 1000)
                    }
                })
            })
        })
    </script>
</head>

<body>
<!--首页头部-->
<nav class="navbar navbar-default navbar-inverse navbar-fixed-top">
    <div class="container">
        <ul class="nav navbar-nav">
            <li>
                <a href="#" style="font-size: 30px; font-family:'楷体';">宠物商城</a>
            </li>
            <li th:if="${session.login_user == null}">
                <a href="#" data-toggle="modal" data-target="#myModal1">登录</a>
            </li>
            <li th:if="${session.login_user == null}">
                <a href="#" data-toggle="modal" data-target="#myModal3" id="getEwm">扫码登录</a>
            </li>
            <li th:if="${session.login_user == null}">
                <a href="#" data-toggle="modal" data-target="#myModal2">注册</a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a href="#" th:text="'欢迎您 :'+${session.login_user.getUsername()}"></a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a th:href="@{/user/set}">个人中心</a>
            </li>
            <li th:if="${session.login_user!=null}">
                <a th:href="@{/user/logout}">注销</a>
            </li>
        </ul>
    </div>
</nav>
<!--搜索框部分-->
<div class="container text-center serch">
    <form action="#" method="get" class="navbar-left navbar-form">
        <input type="text" class="form-control" style="width: 300px;" placeholder="请输入要搜索的内容.."/>
        <button class="btn btn-primary">搜索</button>
    </form>
</div>
<hr class="divider"/>
<!--产品分类内容部分-->
<div class="container">
    <div class="col-lg-4">
        <p class="alert alert-danger">所有产品分类</p>
        <ul class="nav pro_class">
            <li th:each="cate:${session.catelist}">
                <a th:text="${cate.getCategoryname()}" th:href="@{'/go/switch/'+${cate.getId()}}"></a>
            </li>
        </ul>
    </div>
    <!--轮播图-->
    <div class="col-lg-8">
        <div id="myCarousel" class="carousel slide">
            <!-- 轮播（Carousel）指标 -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- 轮播（Carousel）项目 -->
            <div class="carousel-inner">
                <div class="item active">
                    <a href="#"><img th:src="@{../static/img/index/lunbo/1.jpg}"></a>
                </div>
                <div class="item">
                    <a href="#"><img th:src="@{../static/img/index/lunbo/2.jpg}"></a>
                </div>
                <div class="item">
                    <a href="#"><img th:src="@{../static/img/index/lunbo/3.jpg}"></a>
                </div>
            </div>
            <!-- 轮播（Carousel）导航 -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>
<hr class="divider"/>
<!--产品信息部分-->
<div class="container">
    <!--1-->
    <div class="panel panel-info" th:each="product:${productList}">
        <div class="panel-heading" th:text="${product.getKey()}">
            奶制品
        </div>
        <div class="panel-body">
            <div class="thumbnail col-lg-3" th:each="pro:${product.getValue()}">
                <a th:href="@{'/product/detail/'+${pro.getId()}}"><img th:src="${pro.getCover()}" alt="..."></a>
                <div class="caption">
                    <h3 th:text="${pro.getProname()}">骆驼牌羊奶</h3>
                    <p th:text="${pro.getInfo()}">绝对不掺假三路</p>
                    总销量: <span th:text="${pro.getSales()}"></span>
                </div>
            </div>
        </div>
    </div>
</div>
<!--登录-->
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">登录页面</h4>
            </div>
            <form th:action="@{/user/login}" method="post">
                <div class="modal-body">
                    <input type="text" name="username" id="username" value="" placeholder="用户名" class="form-control"/>
                    <br/>
                    <input type="password" name="password" id="password" value="" placeholder="密码"
                           class="form-control"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">登录</button>
                </div>
            </form>
        </div>
    </div>
</div>
<!--扫码登录-->
<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModal3">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">扫码登录页面</h4>
            </div>
            <div>
                <img src="" id="ewm">
            </div>
        </div>
    </div>
</div>

<!--注册-->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">注册页面</h4>
            </div>
            <form th:action="@{/user/reg}" method="post">
                <div class="modal-body">
                    <input type="text" name="username" value="" placeholder="用户名" class="form-control"/>
                    <br/>
                    <input type="password" name="password" value="" placeholder="密码" class="form-control"/>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="submit" class="btn btn-primary">注册</button>
                </div>
            </form>

        </div>
    </div>
</div>
</body>

</html>